Below is the source code for example_image.cfm
<!--- default params --->
<cfparam name="form.bgcolor" default="ffffff">
<cfparam name="form.border" default="1">
<cfparam name="form.bordercolor" default="cc0000">
<cfparam name="form.padding" default="0">
<cfparam name="form.spacing" default="0">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CF_Tab Example</title>
<style type="text/css">
.textfield { font-family: "MS Sans Serif"; font-size: 9pt; border: 1px solid #cccccc; }
.button { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #FFFFFF; background-color: #000000; cursor: hand}
.tablestandard { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }
</style>
</head>
<body>
<cfoutput>
<cfform action="example_image.cfm" method="POST">
<h2>CF_Tab Example</h1>
<table border="0" cellpadding="10">
<tr>
<!--- custom appearance --->
<td valign="top" nowrap class="tablestandard">
<strong>Image based tabs. Customize tab appearance:</strong><br>
<table border="0" cellpadding="2" cellspacing="2" class="tablestandard">
<tr>
<td>Padding</td>
<td><cfinput type="Text" name="padding" class="textfield" value="#form.padding#" validate="integer" size="4"></td>
</tr>
<tr>
<td>Spacing</td>
<td><cfinput type="Text" name="spacing" class="textfield" value="#form.spacing#" validate="integer" size="4"></td>
</tr>
<tr><td colspan="2"><hr size="1"></td></tr>
<tr>
<td>Background color</td>
<td><cfinput type="Text" name="bgcolor" class="textfield" value="#form.bgcolor#" size="8"></td>
</tr>
<tr>
<td>Border color</td>
<td><cfinput type="Text" name="bordercolor" class="textfield" value="#form.bordercolor#" size="8"></td>
</tr>
<tr>
<td>Border</td>
<td><cfinput type="Text" name="border" class="textfield" value="#form.border#" validate="integer" size="4"></td>
</tr>
</table>
</td>
<!--- SHOW TAB --->
<td valign="top" class="tablestandard">
<CF_TAB name="tabSample" width="500" height="200"
bgcolor="#form.bgcolor#"
border="#form.border#" bordercolor="#form.bordercolor#"
padding="#form.padding#" spacing="#form.spacing#">
<CF_TABITEM name="Tab1" TabImg="images/pick.gif" TabImg_Over="images/pick_over.gif">
This is the <strong>content</strong> of first tab.<br>
Content can be any HTML. For example image below:<br>
<img src="http://www.masrizal.com/images/coldfusionmx.gif" alt="ColdFusion MX Master">
</CF_TABITEM>
<CF_TABITEM name="Tab2" TabImg="images/2ndtab.gif" TabImg_Over="images/2ndtab_over.gif" selected>
This is the <strong>content</strong> of 2nd tab.<br><br>
This is the default selected tab.
</CF_TABITEM>
<CF_TABITEM name="TabYahoo" TabImg="images/yahoo.gif" TabImg_Over="images/yahoo_over.gif" ContentURL="http://www.yahoo.com"/>
<CF_TABITEM name="TabRedirect" TabImg="images/google.gif" TabImg_Over="images/google_over.gif" ClickURL="http://www.google.com"/>
</CF_TAB>
<hr size="1">
<strong>Notes:</strong><br>
<li>
Images are shown as is.<br>
If you want to give effect of lifted tab, what you have to do is just create a taller image than the default one.<br>
(like in this example)
</li>
<br><br>
<a href="viewsource.cfm?source=example_image.cfm" target="source">View source of this file</a>
<a href="example.cfm">View sample of tabs built using text</a>
<a href="example_menu.cfm">View sample of tabs used as a menu</a>
</td>
</tr>
</table>
<input class="button" type="Submit" value="Update Appearance">
</cfform>
</cfoutput>
</body>
</html>